<template>
    <div class="hello">
        <ul>
            <li v-for="(item, index) in proData">
                <label for="">
                    <input type="checkbox" :value="item.name" v-model="selectArr">
                </label>{{item.name}}
            </li>
           	 ：
        </ul>
        <button type="" @click="del">删除</button>
        {{selectArr}}
        <label>
            <input type="checkbox" class="checkbox" @click="selectAll"/>全选
        </label>
    </div>
</template>

<script>
    var proData = [{
        "name": "aaaaaaaaaa"
    }, {
        "name": "bbbbbbbbbb"
    }, {
        "name": "cccccccccc"
    }, {
        "name": "dddddddddd"
    }]
    export default {
        name: 'hello',
        data: function() {
            return {
                proData: proData,
                selectArr: []
            }
        },
        methods: {},
        watch: {//深度 watcher
        	
        },
        created() {
            this.$http.get('').then(function(response) {
                response = response.body;
                this.proData = response.data;
            })
        },
        methods: {
            del() {
                var arr = [];
                var len = this.proData.length;
                for(var i = 0; i < len; i++) {
                    if(this.selectArr.indexOf(i) >= 0) {
                        console.log(this.selectArr.indexOf(i))
                    } else {
                        arr.push(proData[i])
                    }
                }
                this.proData = arr;
                this.selectArr = []
            },
            selectAll(event) {
                var _this = this;
                console.log(event.currentTarget)
                if(!event.currentTarget.checked) {
                    this.selectArr = [];
                } else { //实现全选
                    _this.selectArr = [];
                    _this.proData.forEach(function(item, i) {
                        _this.selectArr.push(item.name);
                    });
                }
            }
        }
    }
</script>
<style scoped="scoped">
	* {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#app {
		background: #F5E0C1;
		height: 100%;
	}
	
	.main-img {
		width: 100%;
		height: 100%;
		background: url(../assets/images/lun1_07.jpg) no-repeat;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		background-size: 100%;
	}
	
	.ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10vh;
	}
	
	.main-img li {
		width: 100%;
		background: white;
		margin-top: 2vh;
	}
	
	.ul-p {
		color: #717171;
		margin-left: 1vw;
		display: flex;
		justify-content: flex-start;
	}
	
	.ul-p s {
		font-size: 0.16rem;
	}
	
	.ul-pp {
		color: #FF1D51;
		margin-left: 1vw;
		display: flex;
		justify-content: flex-start;
	}
	
	.ul-pp span {
		font-size: 0.373333rem;
		line-height: 2vh;
	}
	
	.btn {
		display: flex;
		margin-left: 1vw;
		justify-content: flex-start;
	}
</style>
